<template>
    <div class="topic">
        <!-- 上拉加载list -->
                    <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
        
        <ul>
             <router-link tag="li"  :to="`/home/topicdetail?id=${item.id}`" v-for="item in list" :key="item.id">
            <!-- <li v-for="item in list" :key="item.id"> -->
            <img :src="item.scene_pic_url" alt="">
            <p>{{item.title}}</p>
            <p>{{item.subtitle}}</p>
            <p>{{item.price_info}}元起</p>
            <!-- </li> -->
             </router-link>
        </ul>
     </van-list>
    </div>
</template>

<script>
    import{listaction} from "@/api/topic"
    export default {
        data(){
            return{
                list:[],
                page:1,
                loading:false,
                finished:false

            };
        },
        methods:{
            onLoad(){
                listaction({
                    page:this.page
                })
                .then(res=>{
                    console.log(res);
                  this.list.push(...res.data)    
                  this.page+=1;
                  this.loading=false;
                //   画到最后一页停止加载
                if(res.total==this.page-1){
                    this.finished=true;
                }
                
                })
            }
        }
    }
</script>

<style lang="scss">
    .topic{
        padding-bottom: 50px;
        li{
            img{
                width: 100%;
            }
        }
    }
</style>